<template>
  <div class="search">
    <Card>
      <Row>
        <Form
          ref="editForm"
          :model="editForm"
          :rules="rules"
          style="width: 100%"
          :label-width="120"
        >
          <FormItem label="资讯来源" prop="sourceType">
            <div>
              【投稿 - {{ editForm.type | filterType }}】 -
              {{ editForm.source }}
            </div>
          </FormItem>
          <FormItem label="资讯内容" prop="details">
            <div class="news-content">
              <div class="news-title">{{ editForm.title }}</div>
              <div class="news-second">
                <div>{{ editForm.origin }}</div>
                <div>{{ editForm.createTime }}</div>
              </div>
              <div
                class="news-body"
                v-if="editForm.resourceType == 1"
                v-html="editForm.details"
              ></div>
              <div class="news-body" v-else>
                <video autoplay controls :src="editForm.content" />
              </div>
              <div>
                <div v-for="(i, k) in labelList" :key="k" class="type-item">
                  {{ i.label }}
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="审核意见" prop="remarks">
            <Input
              v-model="editForm.remarks"
              type="textarea"
              :rows="10"
              style="width: 70%"
              placeholder="请输入审核意见"
            ></Input>
          </FormItem>
          <div>
            <Button type="text" @click="toback">返回</Button>
            <Button type="primary" @click="submitForm(2)" style="margin: 0 10px"
              >驳回</Button
            >
            <Button type="success" @click="submitForm(1)">通过</Button>
          </div>
        </Form>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_News from "@/api/news.js";

export default {
  name: "news-examine",
  data() {
    return {
      editForm: {}, // 表单
      labelList: [], //关键字标签
      rules: {
        // 验证规则
        remarks: [{ required: true, message: "请输入审核意见" }],
      },
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  filters: {
    // 过滤资讯类型
    filterType(val) {
      let label = "";
      let typeList = [
        { value: "1003001", label: "政策法规" },
        { value: "1003002", label: "求职创业" },
        { value: "1003003", label: "运动处方" },
        { value: "1003004", label: "健康科普" },
        { value: "1003005", label: "其他" },
      ];
      typeList.map((i) => {
        if (i.value == val) label = i.label;
      });
      return label;
    },
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "news-examine");
      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
      this.$router.go(-1);
    },
    // 初始化表单
    init(id = null) {
      let form = {
        id: null,
        title: null, //资讯标题
        recommendSort: -1, //推荐显示 -1不推荐，1推荐
        type: null, //资讯类型
        sourceType: null, //资讯来源类型
        origin: null, //资讯来源
        keyword: null, //关键字
        displayMode: 1, //显示模式 1大图，2小图，3普通
        resourceType: 1, //上传形式 1图文，2视频
        details: null, //资讯内容
        content: null, // 临时资讯内容
        coverPath: "", // 资讯封面
        createByType: "1004001", //创建人类型1004001专家，1004002平台
        remarks: null, //审核意见
      };
      if (id) {
        API_News.getNewsDetail(id).then((res) => {
          if (res.success) {
            this.editForm = Object.assign(form, res.result);
            if (this.editForm.keyword) {
              this.labelList = this.editForm.keyword.split(",");
            }
            if (this.editForm.resourceType == 2) {
              this.editForm.content = this.editForm.details;
            }
          }
        });
      } else {
        this.editForm = Object.assign({}, form);
        this.labelList = [];
      }
      this.$refs.editForm.resetFields();
    },
    //提交
    submitForm(v) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let params = {
            informationId: this.editForm.id,
            remarks: this.editForm.remarks,
            status: v,
          };
          API_News.postNewsExamine(params).then((res) => {
            if (res.success) {
              this.$Message.success("审核已" + (v == 1 ? "通过" : "驳回"));
              this.toback();
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.news-content {
  width: 90%;
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d8d8d8;
  .news-title {
    color: #000;
    margin: 20px 0;
    text-align: center;
    font-size: 28px;
  }
  .news-second {
    display: flex;
    justify-content: center;
    > div {
      margin: 0 40px;
    }
  }
  .news-body {
    font-size: 16px;
    width: auto;
    padding: 20px 50px;
    height: auto;
    text-align: center;
    video {
      height: 500px;
      background-color: #000;
    }
  }
  .type-item {
    user-select: none;
    display: inline-block;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 0 5px;
    background-color: #f5f5f5;
  }
}
</style>
